<template>
  <div id="userList">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" width="200" align="center"/>
      <el-table-column prop="registe_time" label="注册日期" width="280"/>
      <el-table-column prop="username" label="用户名" width="280"/>
      <el-table-column prop="city" label="注册地址" fixed="right" align="left"/>
    </el-table>
    <div class="pageNext">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import api from '@/api/center'
  import store from '@/store'

  export default {
    data() {
      return {
        currentPage: 1,//当前页
        total: 0,//总数量
        tableData: [
          {
            registe_time: '',
            username: '',
            city: ''
          }
        ]
      }
    },
    mounted: function () {
      let params = {
        limit: 10
      };
      api.queryUserLists(params).then(res => {
        this.tableData = res;
      });
      api.queryUserCount().then(res => {
        if(res.status === 1){
          this.total = res.count;
        }
      });
    },
    methods: {
      handleCurrentChange(val) {
        let params = {
          limit: 10,
          offset: this.currentPage * 10
        };
        api.queryUserLists(params).then(res => {
          this.tableData = res;
        });
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .pageNext {
    position relative
    top 10px
    width 100%
  }
</style>
